<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{common/layout}">
<head>
    <title th:text="${info.title}"></title>
    <meta name="keywords" th:content="${info.getKeywords()}?:${info.title}">
    <meta name="description" th:content="${info.description}?:${info.title}">
    <link rel="stylesheet" th:href="@{/css/article.css(v=1.0.4)}">
    <link rel="stylesheet" th:href="@{/vendor/toastr/toastr.min.css(v=2.1.1)}">
    <link rel="stylesheet" th:href="@{/vendor/highlight/styles/github.css(v=9.13.1)}">
    <script th:src="@{/vendor/toastr/toastr.min.js(v=2.1.1)}"></script>
</head>
<body>
<div layout:fragment="content">
    <article class="article well article-body" id="article">
        <div class="breadcrumb">
            <i class="fa fa-home"></i>
            <a th:href="@{${GLOBAL.BLOG_URL}}" th:title="${GLOBAL.BLOG_TITLE}" th:text="${GLOBAL.BLOG_TITLE}"></a>
            &gt;
            <a th:href="@{/category/{url}/(url=${info.category.url})}" th:title="${info.category.name}"
               th:text="${info.category.name}"></a>
            &gt;
            <span th:text="${info.title}"></span>
        </div>
        <!-- 大型设备详细文章 -->
        <div class="hidden-xs">
            <div class="title-article">
                <h1 th:text="${info.title}"></h1>
            </div>
            <div class="tag-article">
            <span class="label label-gal">
                <i class="fa fa-calendar"></i> [[${#dates.format(info.createTime,'yyyy-MM-dd')}]]
            </span>
                <span class="label label-gal">
                <i class="fa fa-eye"></i> [[${info.visits}]] ℃
            </span>
            </div>
        </div>
        <!-- 小型设备详细文章 -->
        <div class="visible-xs">
            <div style="text-align: center;">
                <div class="title-article">
                    <h4 style="color: #d2322d;" th:text="${info.title}"></h4>
                </div>
                <p>
                    <i class="fa fa-calendar"></i> [[${#dates.format(info.createTime,'yyyy-MM-dd')}]]
                    <i class="fa fa-eye"></i> [[${info.visits}]] ℃
                </p>
            </div>
        </div>
        <div class="article-content">
            [(${info.content})]
            <div class="alert alert-info statement">
                <th:block th:if="${info.isOriginal}">
                    版权声明：<a th:href="${GLOBAL.BLOG_URL}" th:title="${GLOBAL.BLOG_TITLE}"
                             th:text="${GLOBAL.BLOG_TITLE}"></a>原创文章，转载请注明出处。<br><br>
                    文章链接：[[${#request.getRequestURL()}]]<br><br>
                    发表时间：[[${#dates.format(info.createTime,'yyyy-MM-dd HH:mm')}]]<br><br>
                    最后更新时间：[[${#dates.format(info.updateTime,'yyyy-MM-dd HH:mm')}]]<br>
                </th:block>
                <th:block th:unless="${info.isOriginal}">
                    原文链接：[[${info.sourceUrl}]]<br><br>
                    转载时间：[[${#dates.format(info.createTime,'yyyy-MM-dd HH:mm')}]]<br>
                </th:block>
            </div>
            <!-- 标签 -->
            <footer class="article-footer">
                <div class="article-tags">
                    <i class="fa fa-tags"></i>
                    <a th:each="tag:${info.tags}" th:href="@{/tag/{url}/(url=${tag.url})}" th:title="${tag.name}"
                       th:text="${tag.name}"></a>
                </div>
            </footer>
        </div>
    </article>
    <div class="previous-next-links">
        <div class="previous-design-link" th:if="${previousArticle}">
            <a th:href="'/'+${previousArticle.url}+'.html'" rel="prev" th:title="${previousArticle.title}">
                <i style="font-size:16px;" class="fa fa-arrow-left" aria-hidden="true"></i>
                [[${previousArticle.title}]]
            </a>
        </div>
        <div class="next-design-link" th:if="${nextArticle}">
            <a th:href="'/'+${nextArticle.url}+'.html'" rel="next" th:title="${nextArticle.title}">
                [[${nextArticle.title}]]
                <i style="font-size:16px;" class="fa fa-arrow-right" aria-hidden="true"></i>
            </a>
        </div>
    </div>
    <th:block th:if="${info.isComment}">
        <div layout:replace="~{common/comment}"></div>
    </th:block>
</div>
</body>
</html>